<template>
  <sys-dialog
      :title="dialog.title"
      :width="dialog.width"
      :height="dialog.height"
      :visible="dialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
  >
    <template #content>
      <a-tree
          ref="assignTree"
          v-if="treeData && treeData?.length > 0"
          class="myTree"
          checkable
          defaultExpandAll
          :show-line="showLine"
          :tree-data="treeData"
          :fieldNames="fieldNames"
          v-model:checkedKeys="checkedKeys"
      ></a-tree>
    </template>
  </sys-dialog>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import SysDialog from "@/components/SysDialog.vue";
import {message} from "ant-design-vue";
import useDialog from "@/hooks/useDialog";
import useAssign from "@/composable/role/useAssign";
import {getUserId} from "@/utils/auth";
import {assignSaveApi} from "@/api/role";

const { showLine, treeData, fieldNames, getTreeData, checkedKeys, assignTree } = useAssign()

const { dialog, onClose, onShow } = useDialog()

const roleId = ref();

//弹框确定
const onConfirm = async () => {
  const ids = assignTree.value.checkedKeys.concat(assignTree.value.halfCheckedKeys)
  if (ids.length == 0) {
    message.error('请选择权限!')
    return;
  }
  const parm = {
    roleId: roleId.value,
    list: ids
  }
  const res = await assignSaveApi(parm)
  if (res && res.code == 200) {
    message.success(res.msg)
    onClose()
  }
}

//显示弹框
const show = (row: any) => {
  roleId.value = row.roleId
  dialog.title = '为【' + row.roleName + '】分配角色';
  dialog.width = 280;
  dialog.height = 450;
  getTreeData({ userId: getUserId() || '', roleId: row.roleId })
  onShow()
}

defineExpose({
  show
})
</script>

<style scoped lang="scss">
.myTree {
  .ant-tree-switcher-noop {
    display: none !important;
  }
}
</style>
